import {StyleSheet, Text, View} from 'react-native';
import {SvgUri} from 'react-native-svg';
import _ from 'lodash';
import {getRealSize} from '../../utils';
import ThemeStyles from '../../styles';
import React from 'react';
import PropTypes from 'prop-types';

class Product extends React.Component {
  static propTypes = {
    item: PropTypes.object,
  };

  static defaultProps = {
    item: {},
  };

  render() {
    const {item} = this.props;
    const url = _.get(item, 'product.icon.url');
    return (
      <View style={Styles.box}>
        <View style={Styles.image}>
          {url && (<SvgUri
              uri={url}
              width={getRealSize(24)}
              height={getRealSize(24)}
              fill={ThemeStyles.Color.primary.color}
          />)}
        </View>
        <View style={Styles.content}>
          <Text style={Styles.title}>
            {item.redo && 'Redo:'}
            {_.get(item, 'product.name', '')}
          </Text>
          <Text style={Styles.summary} numberOfLines={2}>
            {item.summary}
          </Text>
        </View>
      </View>
    );
  }
}

export default Product;

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    flexDirection: 'row',
    marginTop: getRealSize(12),
  },
  image: {
    alignItems: 'center',
    justifyContent: 'center',
    height: getRealSize(64),
    width: getRealSize(64),
    backgroundColor: '#f2f2f2',
  },
  content: {
    flex: 1,
    marginLeft: getRealSize(8),
  },
  title: {
    fontSize: getRealSize(14),
    fontWeight: '400',
    color: '#333',
  },
  summary: {
    marginTop: getRealSize(8),
    fontSize: getRealSize(12),
    color: '#757575',
  },
});
